<template>
<div class="djqh">

<span id="prev"  @click="priv" class="btn prev">&lt;</span>
<span id="next" @click="next" class="btn next">&gt;</span>

  <div id="picBox" class="picBox">
    <ul class="cf" ref="big" :style="{width: `${w1 * len1}px`}">
      <li v-for="(item, idx2) in imgList" :key="idx2" >
        <img :src="item.imgVal" width="100%" height="100%"/>
        <i class="curr">{{item.key}}</i>
        <i class="total">{{index + 1}} / {{imgList.length}}</i>
      </li>
    </ul>
  </div>

  <div id="listBox" class="listBox">
    <ul class="cf" ref="item" :style="{width: `${w2 * len2}px`}">
      <li v-for="(item, idx) in imgList" :key="idx" :class="index === idx ? 'on' :''" @click="toimg(idx)">
        <img :src="item.imgVal" /></li>
    </ul>
  </div>
</div>
</template>

<script >
export default {
  props: {
    imgList: {
      type: Array,
      default: () => {
        return [{key: '妹子1',imgVal:'https://dwz.cn/1bXEnKqN'},
        {key: '妹子2',imgVal:'https://dwz.cn/sPoZ11Cr'},
        {key: '妹子3',imgVal:'https://dwz.cn/m4oKS5d1'},
        {key: '妹子4',imgVal:'https://dwz.cn/Kl3wfan1'},
        {key: '妹子5',imgVal:'https://dwz.cn/iRlsb9kx'},
        {key: '妹子6',imgVal:'https://dwz.cn/p98C60Ry'},
        {key: '妹子7',imgVal:'https://dwz.cn/qqmz1sZe'},
        {key: '妹子8',imgVal:'https://dwz.cn/PbB4OHmd'},
        {key: '妹子9',imgVal:'https://dwz.cn/D8F4IAAQ'},]

      }
    }
  },
  data() {
    return {
      index: 0,
      num2: '',
      num: 5, // 小图列表数量
      len1: 0,
      len2: 0,
      w1: 0,
      w2: 0
    }
  },
  mounted() {
    this.w1 = this.$refs.big.children[0].offsetWidth
    this.w2 = this.$refs.item.children[0].offsetWidth
    this.len1 = this.len2 = this.imgList.length
    this.num2 = Math.ceil(this.num / 2)
  },
  methods: {
    toimg(idx) {
      this.index = idx
      this.change()
    },
    next() {
      this.index++
      this.index = this.index === this.len2 ? 0 : this.index
      this.change()
    },
    priv() {
      this.index--
      this.index = this.index === -1 ? 0 : this.index
      this.change()
    },
    change() {
      this.$refs.big.style.transform = `translateX(-${this.index * this.w1}px)`
      if (this.index < this.num2) {
        this.$refs.item.style.transform = `translateX(${0}px)`
      } else if (this.index + this.num2 <= this.len2) {
        this.$refs.item.style.transform = `translateX(-${(this.index - this.num2 + 1) * this.w2}px)`
      } else {
        this.$refs.item.style.transform = `translateX(-${(this.len2 - this.num) * this.w2}px)`
      }
      this.$refs.item.style.transition = `1s`
      this.$refs.big.style.transform = `translateX(-${this.index * this.w1}px)`
    }
  },
  components: {

  }
}
</script>

<style scoped lang="stylus">
img
  border none
.djqh
  width 710px
  height 500px
  position relative
  background #f7f7f7
  margin 0 auto
  .btn
    position absolute
    width 28px
    color  #fff
    opacity  .8
    height 70px
    bottom 9px
    cursor pointer
    z-index 99
    font-size 28px
    font-weight bold
    text-align center
    line-height 70px
  .prev
    left 0
    background #000

  .next
    right 0
    background #000
  li
    float left
  .cf
    li
      position relative
      color #fff
    a
      display block
      width 710px
      height 330px
      position absolute
      color: #fff
  .picBox
    height 416px
    position relative
    overflow hidden
    ul
      height 330px
      position absolute
    li
      width 710px
      height 416px
      .curr
        position absolute
        left  0
        padding  10px
        bottom  8px
        background  rgba(0,0,0, .8)
      .total
        position absolute
        right  0
        padding  10px
        bottom  8px
        background  rgba(0,0,0, .8)
  .listBox
    width 642px
    height 100px
    margin 0 auto
    position relative
    padding 6px 0 10px
    overflow hidden
    ul
      height 100px
      position absolute
      li
        width 129px
        height 70px
        cursor pointer
        position relative
        opacity  .5
        img
          width 124px
          height  70px
      .on
        opacity 1
</style>
